<template>
  <div>

    <!-- 头部展示 -->
    <div class="title">
      <el-tag>本次试卷标题: </el-tag>{{  paper.title  }}
      <el-tag type="success">考试开始时间: </el-tag>{{ paper.startTime | dateFormat }}
      <el-tag type="danger">考试结束时间: </el-tag>{{ paper.endTime | dateFormat }}
    </div>

    <!-- 分割线 -->
    <div class="divider"><el-divider><i class="el-icon-edit"></i></el-divider></div>

    <!-- 题目内容 -->
    <el-card class="box-card">

      <div class="questions-container" v-for="(question, key, index) in questions" :key="index">

        <p class="question-title">
          {{ index === 0 ? '一' : (index === 1 ? "二" : '三') }}、
          {{ key === 'radio' ? "单选题" : (key === 'multi' ? "多选题" : "判断题") }}
          (共{{ question.length }}题)
        </p>

        <question
          class="question"
          @on-children-change="onChildrenChange"
          v-for="(item,j) in question"
          :type="item.type"
          :key="item.id"
          :serial="j"
          :answer="answerForm[item.id]"
          :question="item">
        </question>

        <el-divider v-if="index === 1"></el-divider>

      </div>

<!--      <div class="questions-container">-->
<!--        <p class="question-title">二、多选题 (共{{ questions.multi.length }}题)</p>-->
<!--        <question-->
<!--          class="question"-->
<!--          @on-children-change="onChildrenChange"-->
<!--          :type="2"-->
<!--          v-for="(item,i) in questions.multi"-->
<!--          :key="item.id"-->
<!--          :serial="i"-->
<!--          :answer="answerForm[item.id]"-->
<!--          :question="item">-->
<!--        </question>-->
<!--        <el-divider></el-divider>-->
<!--      </div>-->



<!--      <div class="questions-container">-->
<!--        <p class="question-title">三、判断题 (共{{ questions.judge.length }}题)</p>-->
<!--        <question-->
<!--          class="question"-->
<!--          @on-children-change="onChildrenChange"-->
<!--          :type="3"-->
<!--          v-for="(item,i) in questions.judge"-->
<!--          :key="item.id"-->
<!--          :serial="i"-->
<!--          :answer="answerForm[item.id]"-->
<!--          :question="item">-->
<!--        </question>-->
<!--      </div>-->

    </el-card>

    <!-- 提交按钮 -->
    <div class="submit-button">
      <el-button type="warning" round @click="saveAnswer">保存试卷</el-button>
      <el-button type="primary" round @click="submitAnswer">试卷提交</el-button>
    </div>

  </div>
</template>

<script>
import Question from "./common/Question";
import { Confirm, Success, Info, Warning, Error } from "../utils/element.config";
import { GetPaperQuestions, SubmitPaper } from "../api/public";

export default {
  data(){
    return {
      questions: { // 所有题目
        'radio': [],
        'multi': [],
        'judge': []
      },
      paper: {}, // 当前试题的信息
      answerForm: {}
    };
  },
  beforeCreate: function() {
    document.getElementsByTagName("body")[0].style.overflow = "auto";
  },
  created() {
    /* 获取题目信息 */
    this.getQuestions(this.id);
  },
  methods: {
    /** 请求获取题目信息 **/
    getQuestions(id){

      GetPaperQuestions({id: id}).then(result => {
        if( result.code === 200 ){
          /* 修改试卷中的时间 */
          result['data']['paper']['startTime'] = Date.parse(result['data']['paper']['startTime']);
          result['data']['paper']['endTime'] = Date.parse(result['data']['paper']['endTime']);
          this.paper = result.data.paper || {};
          this.questions['radio'] = result.data.radio || [];
          this.questions['multi'] = result.data.multi || [];
          this.questions['judge'] = result.data.judge || [];
          /* 先进行判断, 如果返回的 answer为空才 生成提交的表单 */
          if( !result.data.answer ){
            this.questions['radio'].forEach(item => {
              this.answerForm[item.id] = '';
            })
            this.questions['multi'].forEach(item => {
              this.answerForm[item.id] = [];
            })
            this.questions['judge'].forEach(item => {
              this.answerForm[item.id] = '';
            })
          }else{
            this.answerForm = result.data.answer;
          }
          /* 最后, 判断一下各个题型中是否有没有题目的情况, 如果有那么就移除 */
          for (let key in this.questions) {
            if( this.questions[key].length === 0 ){
              delete this.questions[key]
            }
          }

        }else if( result.code === 300 ){
          Warning(result.message);
          setTimeout(() => {
            this.$router.push("/index/wdks");
          }, 1000);
        }
      })

    },
    /** 监听子组件选项 **/
    onChildrenChange(value, id){
      this.answerForm[id] = value;
    },
    /** 保存答案 || 异步请求 **/
    saveAnswer(){
      /* 将需要的信息塞入表单 */
      this.answerForm['id'] = this.paper['id'];
      this.answerForm['submit'] = false; // 设置异步提交
      SubmitPaper(this.answerForm).then(result => {
        if( result.code === 200 ){
          Success("保存成功")
        }else if( result.code === 300 ){
          Error(result.message)
        }
      })
    },
    /** 提交试卷 **/
    submitAnswer(){
      Confirm("确认提交试卷?", "试卷提交确认").then(() => {

        /* 将需要的信息塞入表单 */
        this.answerForm['id'] = this.paper['id'];
        this.answerForm['submit'] = true; // 设置提交考卷
        SubmitPaper(this.answerForm).then(result => {
          if( result.code === 200 ){
            Success("提交成功")
            this.$router.push("/index/wdks");
          }else if( result.code === 300 ){
            Error(result.message)
          }
        })

      }).catch(() => {
        Info("取消了试卷提交")
      })
    }
  },
  props: ['id'],
  components: {
    Question
  }
}
</script>

<style scoped>
.flex-body{
  overflow: visible;
}
.title{
  width: 1000px;
  margin: 20px 425px;
}
.title span{
  margin-left: 10px;
  margin-right: 5px;
}
.divider{
  width: 1240px;
  margin: 20px 164px;
}
.box-card{
  width: 1000px;
  margin: 30px 274px;
}
.box-card /deep/ .el-card__body{
  margin-left: 30px;
  /*display: flex;*/
  /*flex-direction: column;*/
  /*justify-content: space-between;*/
}
.box-card .question-title{
  font-weight: bold;
  font-size: 17px;
}
.box-card .question{
  /*text-indent: 2em;*/
}
.questions-container{
  margin: 20px 0;
}
.submit-button{
  width: 300px;
  margin: 20px 650px;
}
</style>
